<template>
  <span>
    <a-popover trigger="click" position="bottom">
      <template slot="content">
        <div class="columns-content">
          <div v-for="it in columns" :key="it.key" class="columns-content-item">
            <a-checkbox :checked="it.check || it.check == undefined" @change="columnsChange(it)">
              {{ it.title }}
            </a-checkbox>
          </div>
        </div>
      </template>
      <a-button type="link">
        <a-icon type="column-height" />
      </a-button>
    </a-popover>
  </span>
</template>

<script>
import cloneDeep from 'lodash.clonedeep'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {}
  },

  components: {},
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    let key = this.$route.name
    let userColumns = this.tableColumns[key]
    // 比对改变
    if(userColumns){
      let a = this.columns.map(v=>{
        let i = userColumns.findIndex(it=>it.dataIndex == v.dataIndex)
        if(i === -1){
          return v
        }else{
          v.check = userColumns[i].check == undefined ? v.check : userColumns[i].check
          return v
        }
      })
      this.$emit('update:columns', a)
    }
  },
  computed: {
    ...mapGetters({tableColumns: 'tableColumns'})
  },
  watch: {},
  methods: {
    columnsChange(a_item) {
      console.log(a_item)
      let index = this.columns.findIndex(v=>v.title == a_item.title),
        columns = cloneDeep(this.columns);
      if(a_item.check || a_item.check == undefined){
        a_item.check = false
      }else{
        a_item.check = true
      }
      columns[index] = a_item
      console.log(this.$route.name)
      this.$store.dispatch('ChangeTable',{
        key: this.$route.name,
        data:columns
      })
      this.$emit('change',columns)
    },
  },
  destroyed() {},
}
</script>
<style lang='less' scoped>
.columns-content{
  height: 200px;
  // overflow-y: auto;
  overflow-y: auto;
  .columns-content-item{
    padding: 5px;
  }
  &::-webkit-scrollbar-thumb{
      border-radius:10px;
      // box-shadow:inset000pxrgba(240,240,240,.5);
      background-color:rgba(0,0,0,.5);
  }
  &::-webkit-scrollbar-track{
    box-shadow:rgba(240,240,240,.5);
    border-radius:10px;
    background-color:rgba(240,240,240,.5);
  }
  &::-webkit-scrollbar{
    width:6px;
    background-color:rgba(240,240,240,0);
  }
}
</style>